<template>
<div>
    <h1>当前求和为{{sum}}</h1>
    <h1>当前求和方法10倍为{{bigSum}}</h1>
    <h1>我在{{school}}，学习{{subject}}</h1>
    <h3 style="color:red">Person组件的总人数是：{{userList.length }}</h3>
    <select v-model="n">
        <!-- 这里的value直接使用会被解析成字符串，使用v-bind绑定，引号里面会被当成表达式处理 -->
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
    </select>
    <!-- 1.mapMutations对象写法以及中间方法调用生成的方法 -->
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <!-- 1.mapActions对象写法 -->
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
</div>
</template>

<script>
import { mapState, mapGetters, mapMutations,mapActions } from 'vuex'
export default {
    name:'Count',
    data() {
        return {
            n:1, //当前默认选择的数字
        }
    },
    computed:{
        //2.数组写法：当计算属性名和state中的属性名一致时使用
        ...mapState('countAbout',['sum','school','subject']),
        ...mapState('personAbout',['userList']),

        //2.数组写法：当计算属性名和getters中的属性名一致时使用
        ...mapGetters('countAbout',['bigSum'])
    },
    mounted(){
    },
    methods: {
        //生成方法
        //1.对象写法：借助mapMutations生成对应的方法，方法中会调用commit去联系mutations。key-生成的方法名：value-mutations中的方法
        ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
        //1.对象写法：借助mapActions生成对应的方法，方法中会调用dispatch去联系actions。key-生成的方法名：value-actions中的方法
        ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    },
    
}
</script>
<style scoped>
button{
    margin-left: 5px;
}
</style>